<template>
  <main class="wss-container">
    <div class="label-box-content">
      <NewCard title="专家审核">
        <ComForm :list="comForm"></ComForm>
      </NewCard>

      <NewCard title="内容">
        <ComTable
          :config="config"
          :pagination="{
            total: pageing.total,
            pageNum: pageing.pageNum,
            pageSize: pageing.pageSize,
          }"
          :list="labelData"
          :modes="tableModes"
        >
          <el-table-column align="left" width="100" label="操作">
            <template>
              <span style="color: #1890ff">查看</span>
              <span style="color: #1890ff">通过</span>
              <span style="color: #1890ff">不通过</span>
            </template>
          </el-table-column>
        </ComTable>
      </NewCard>

      <!-- 编辑专家信息 -->
      <el-button type="text" @click="editExpert = true">编辑专家信息</el-button>
      <div class="editExpert">
        <el-dialog :visible.sync="editExpert" title="编辑专家信息">
          <el-form :model="dialogForm" :rules="rules">
            <el-form-item label="专家头像" :label-width="formLabelWidth">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="dialogForm.fileList"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  图片尺寸300*300，支持png/jpg格式，大小不超过500KB
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="专家姓名" :label-width="formLabelWidth">
              <el-input
                v-model="dialogForm.expertName"
                autocomplete="off"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item
              label="专家类型"
              :label-width="formLabelWidth"
              prop="expertType"
            >
              <el-select v-model="dialogForm.expertType">
                <el-option label="法务" value="toutiao"></el-option>
                <el-option label="税务" value="wenda"></el-option>
                <el-option label="财务" value="fatiao"></el-option>
                <el-option label="其他" value="chaojihetong"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="擅长领域"
              :label-width="formLabelWidth"
              prop="skilledField"
            >
              <el-select v-model="dialogForm.skilledField">
                <el-option label="用工" value="toutiao"></el-option>
                <el-option label="合同" value="wenda"></el-option>
                <el-option label="专利" value="fatiao"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" :label-width="formLabelWidth">
              <el-tag
                v-for="fieldLabel in fieldLabels"
                :key="fieldLabel.name"
                closable
                :type="fieldLabel.type"
                effect="Plain"
              >
                {{ fieldLabel.name }}
              </el-tag>
            </el-form-item>
            <el-form-item
              label="专家职称"
              :label-width="formLabelWidth"
              prop="expertsTitle"
            >
              <el-select v-model="dialogForm.expertsTitle">
                <el-option label="合同纠纷" value="toutiao"></el-option>
                <el-option label="跨境电商" value="wenda"></el-option>
                <el-option label="一带一路" value="fatiao"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="专家等级"
              :label-width="formLabelWidth"
              prop="expertRating"
            >
              <el-select v-model="dialogForm.expertRating">
                <el-option label="甲级" value="toutiao"></el-option>
                <el-option label="乙级" value="wenda"></el-option>
                <el-option label="丙级" value="fatiao"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="专业年资"
              :label-width="formLabelWidth"
              prop="aptitudes"
            >
              <el-input
                v-model.number="dialogForm.aptitudes"
                autocomplete="off"
                placeholder="请输入专业年资"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="标签"
              :label-width="formLabelWidth"
              prop="label"
            >
              <el-select v-model="dialogForm.label">
                <el-option label="合同纠纷" value="toutiao"></el-option>
                <el-option label="劳务纠纷" value="wenda"></el-option>
                <el-option label="跨境电商" value="fatiao"></el-option>
                <el-option label="一带一路" value="fatiao"></el-option>
                <el-option label="房地产开发" value="fatiao"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" :label-width="formLabelWidth">
              <el-tag
                v-for="label in labels"
                :key="label.name"
                closable
                :type="label.type"
                effect="Plain"
              >
                {{ label.name }}
              </el-tag>
            </el-form-item>
            <el-form-item label="证书编号" :label-width="formLabelWidth">
              <el-input
                v-model="dialogForm.certificateNo"
                autocomplete="off"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item
              label="专家简介"
              :label-width="formLabelWidth"
              prop="expertInfo"
            >
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="dialogForm.expertInfo"
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="editExpert = false">取 消</el-button>
            <el-button type="primary" @click="editExpert = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
      <!-- 编辑专家信息 end -->

      <!-- 专家审核失败 -->
      <el-button type="text" @click="expertFailure = true"
        >专家审核失败</el-button
      >
      <el-dialog :visible.sync="expertFailure" title="专家审核失败">
        <el-form :model="expertLose" :rules="rules">
          <el-form-item label="专家姓名" :label-width="formLabelWidth">
            <el-input
              v-model="expertLose.expertLoseName"
              autocomplete="off"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="专家类型" :label-width="formLabelWidth">
            <el-input
              v-model="expertLose.expertLoseType"
              autocomplete="off"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item
            label="失败原因"
            :label-width="formLabelWidth"
            prop="label"
          >
            <el-select v-model="expertLose.label">
              <el-option
                label="执业证书作假，学历作假，不予通过"
                value="toutiao"
              ></el-option>
              <el-option
                label="执业证书作假，学历作假，不予通过"
                value="wenda"
              ></el-option>
              <el-option
                label="执业证书作假，学历作假，不予通过"
                value="fatiao"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" :label-width="formLabelWidth" prop="label">
            <p class="auditLoseTxt">
              您的证书审核未能通过，感谢您的支持和参与～
            </p>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="expertFailure = false">取 消</el-button>
          <el-button type="primary" @click="expertFailure = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 专家审核失败 end-->

      <!-- 查看专家个人信息 -->
      <router-link :to="{ name: 'expertInfo' }">专家个人信息</router-link>
      <!-- 查看专家个人信息 end-->
    </div>
  </main>
</template>

<script>
import NewCard from "../../../../components/newCard.vue";
import ComForm from "../../../../components/comForm.vue";
import ComTable from "../../../../components/comTable.vue";
export default {
  name: "experReview",
  components: { NewCard, ComForm, ComTable },
  data() {
    return {
      // 表单选项
      comForm: {
        modes: [
          {
            placeholder: "请输入专家姓名",
            formType: "input",
            mode: "content",
            label: "专家姓名",
            value: "",
          },
          {
            placeholder: "请选择性别",
            formType: "select",
            mode: "type",
            label: "性别",
            value: "",
            select: [],
          },
          {
            placeholder: "请选择专家类型",
            formType: "select",
            mode: "type",
            label: "专家类型",
            value: "",
            select: [],
          },
          {
            placeholder: "请选择擅长领域",
            formType: "select",
            mode: "type",
            label: "擅长领域",
            value: "",
            select: [],
          },
          {
            placeholder: "请输入手机号",
            formType: "input",
            mode: "content",
            label: "手机号",
            value: "",
          },
          {
            placeholder: "请选择邮箱",
            formType: "select",
            mode: "type",
            label: "邮箱",
            value: "",
            select: [],
          },
          {
            pickerType: "daterange",
            startPlaceholder: "开始日期",
            endPlaceholder: "结束日期",
            formType: "datePicker",
            placeholder: "处理日期",

            rangeSeparator: "至",
            mode: "tempDate",
            label: "申请时间",
            value: null,
          },
        ],
      },
      // 表格配置
      config: {
        quanxian: "base:label:add",
        // border: true,
        isAdd: true,
        loading: false,
      },
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      // 表格参数
      tableModes: [
        {
          label: "姓名",
          mode: "name",
        },
        {
          label: "性别",
          mode: "sex",
        },
        {
          label: "专家类型",
          mode: "expertType",
        },
        {
          label: "擅长领域",
          mode: "goodClass",
        },
        {
          label: "手机号",
          mode: "number",
        },
        {
          label: "邮箱",
          mode: "email",
        },
        {
          label: "地区",
          mode: "address",
        },
        {
          label: "申请时间",
          mode: "applyTime",
        },
      ],
      //编辑专家信息 提示框显示状态
      editExpert: false,
      //专家审核失败 显示状态
      expertFailure: false,
      //专家审核失败 信息
      expertLose: {
        expertLoseName: "",
        expertLoseType: "",
      },
      //编辑专家信息
      dialogForm: {
        //专家头像上传
        fileList: [
          {
            name: "food.jpeg",
            url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          },
        ],
        expertName: "",
        expertsFace: "",
        headPort: "",
        expertName: "",
        expertType: "",
        skilledField: "",
        expertsTitle: "",
        expertRating: "",
        aptitudes: "",
        label: "",
        serialNum: "",
        certificateNo: "",
        expertInfo: "",
      },
      //表单判断
      rules: {
        expertType: [
          {
            required: true,
            message: "请选择专家类型",
            trigger: "blur",
            type: "change",
          },
        ],
        skilledField: [
          {
            required: true,
            message: "请选择擅长领域",
            trigger: "blur",
            type: "change",
          },
        ],
        expertsTitle: [
          {
            required: true,
            message: "请选择专家职称",
            trigger: "blur",
            type: "change",
          },
        ],
        expertRating: [
          {
            required: true,
            message: "请选择专家等级",
            trigger: "blur",
            type: "change",
          },
        ],
        aptitudes: [
          {
            required: true,
            message: "请输入专业年资",
            trigger: "blur",
            type: "number",
          },
        ],
        label: [
          {
            required: true,
            message: "请选择标签",
            trigger: "blur",
            type: "change",
          },
        ],
        expertInfo: [
          {
            required: true,
            message: "请输入专家简介",
            trigger: "blur",
            type: "string",
          },
        ],
      },
      //编辑专家信息 标题宽度
      formLabelWidth: "80px",

      //擅长领域-可移除标签
      fieldLabels: [{ name: "合同" }, { name: "用工" }],
      //标签-可移除标签
      labels: [
        { name: "合同纠纷" },
        { name: "房地产开发" },
        { name: "跨境电商" },
        { name: "一带一路" },
      ],
    };
  },
};
</script>

<style scoped>
.label-box-content >>> .el-card{
  margin-bottom: 30px;
}
.label-box-content >>> .el-form .left{
  flex-wrap: wrap;
}
/* 编辑专家信息 样式修改 */
.el-upload__tip {
  display: initial;
  margin-left: 10px;
}
.el-select {
  display: block;
}
.editExpert .el-form {
  height: 500px;
  overflow-y: auto;
  padding: 0px 20px;
}
/* 证书审核失败样式修改 */
.auditLoseTxt {
  background-color: #f1f1f1;
  margin: 0;
  padding: 15px;
}
</style>